<template>
  <el-dialog :visible.sync="localVisible" title="填写发货信息" width="50%" @close="handleClose">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
      <div v-if="orderGoodsType==1">
        <el-form-item label="物流单号" prop="express_no" required>
          <el-input v-model="form.express_no" placeholder="请输入物流单号"></el-input>
        </el-form-item>
        <el-form-item label="物流公司名称" prop="express_name">
          <el-input v-model="form.express_name" placeholder="请输入物流公司名称"></el-input>
        </el-form-item>

        <el-form-item label="物流公司编码">
          <el-input v-model="form.company_code" placeholder="请输入物流公司编码"></el-input>
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item label="发货内容">
          <el-input type="textarea" rows="5" v-model="form.virtual_info" placeholder="虚拟商品信息，订单发货需要"/>
        </el-form-item>
      </div>

    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="submitForm">确认发货</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    orderGoodsType: {
      type: Number,
      default: 1
    },
    virtualInfo: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      localVisible: false,
      form: {
        company_code: '',
        express_name: '',
        express_no: '',
        virtual_info: ''
      },
      rules: {
        // company_code: [{ required: true, message: '请输入物流公司编码', trigger: 'blur' }],
        // express_name: [{ required: true, message: '请输入物流公司名称', trigger: 'blur' }],
        express_no: [{ required: true, message: '请输入物流单号', trigger: 'blur' }]
      }
    }
  },
  watch: {
    visible(newValue) {
      this.localVisible = newValue
      if (newValue) {
        // 如果对话框显示，则重置表单（可选）
        this.$nextTick(() => {
          this.$refs.formRef && this.$refs.formRef.clearValidate()
        })
      }
    },
    virtualInfo(newValue) {
      this.form.virtual_info = newValue
    },
    localVisible(newValue) {
      this.$emit('update:visible', newValue)
    }
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 提交逻辑，比如调用API
          this.$emit('confirm', { ...this.form }) // 使用展开运算符创建新对象传递给父组件
          this.localVisible = false
        } else {
          console.log('表单验证失败')
          return false
        }
      })
    },
    handleClose() {
      this.localVisible = false
      this.$refs.formRef.resetFields()
    }
  }
}
</script>
